import React, { PureComponent } from 'react';
// import { Row, Col, Card, DatePicker } from 'antd';
import { get as _get } from 'object-path';

// import { Link }  from 'umi';
import { formatMessage } from 'umi';
import { dateConversion2 } from '@/utils/utils';
import ReactEcharts from '@/components/Echarts';
import colors from '@/theme';
import styles from '../List.less';

class BarCharts extends PureComponent {
    state = {};

    getBarOption = () => {
        const { data } = this.props;
        return {
            color: colors,
            tooltip: {
                trigger: 'item',
                formatter(params) {
                    const html = `<div><i style="display: inline-block;vertical-align: middle;width:8px;height:8px;border-radius: 100%;margin-right:6px;background:${
                        params.color
                    };"></i><span style="color:#aaa">${
                        params.name
                    }：</span><span>${dateConversion2(
                        params.value
                    )}</span></div>`;
                    return html;
                }
            },
            legend: {
                orient: 'vertical',
                y: 'center',
                right: 0,
                data: ['工作日', '休息日', '节假日']
            },
            grid: {
                left: '15px',
                right: '200px',
                bottom: '15px',
                top: '50px',
                containLabel: true
            },
            xAxis: {
                show: false,
                type: 'category'
            },
            yAxis: {
                type: 'value',
                name: '分钟',
                position: 'left',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: 'rgba(0,0,0,0.45)'
                }
            },
            series: [
                {
                    data: [
                        {
                            name: '工作日',
                            value: _get(data, 'workOvertime', '')
                        }
                    ],
                    name: '工作日',
                    type: 'bar'
                },
                {
                    data: [
                        {
                            name: '休息日',
                            value: _get(data, 'overtimeRestTime', '')
                        }
                    ],
                    name: '休息日',
                    type: 'bar'
                },
                {
                    data: [
                        {
                            name: '节假日',
                            value: _get(data, 'workOvertimeHolidays', '')
                        }
                    ],
                    name: '节假日',
                    type: 'bar'
                }
            ]
        };
    };

    render() {
        const { data } = this.props;
        return (
            <div className={styles.BarCharts}>
                <div className={styles.fontbox}>
                    <span>
                        {formatMessage({
                            id: 'stat.name.zsc'
                        })}
                    </span>
                    <b className={styles.bigFontSize}>
                        {dateConversion2(data.overtimeTotal)}
                    </b>
                </div>
                <div className={styles.flex}>
                    <div className={styles.chartsBox}>
                        <ReactEcharts
                            legendExtra={[
                                name => {
                                    const result = this.getBarOption().series.find(
                                        item => item.name === name
                                    );
                                    if (result) {
                                        return {
                                            value: dateConversion2(
                                                result.data[0].value
                                            ),
                                            style: {
                                                color: '#000',
                                                padding: [0, 0, 0, 12]
                                            }
                                        };
                                    }
                                    return null;
                                }
                            ]}
                            option={this.getBarOption()}
                            style={{
                                width: '100%',
                                height: '100%'
                            }}
                        />
                    </div>
                </div>
            </div>
        );
    }
}
export default BarCharts;
